<template>
  <div class="main">
    <h1>child-c .vue 组件</h1>
    <h1>原始方法: {{ $store.state.setting.name }}</h1>

    <button @click="changeSettingName1">点击改变1 setting.name</button>

    <!-- <button @click="changeSettingName2">点击改变2 setting.name</button> -->

<button @click=" changeSettingName3">点击改变3  采用 createNamespacedHelpers 帮助函数 setting.name</button>


   
  </div>
</template>

<script>
// 方式二
// import { mapMutations } from "vuex";

// 方式三
import  {createNamespacedHelpers} from 'vuex'


// const {mapMutations,mapActions,mapState,mapGetters} =createNamespacedHelpers('需要帮助的模块的名字')
const {mapMutations,mapActions,mapState,mapGetters} =createNamespacedHelpers('setting')

export default {
  name: "",
  data() {
    return {};
  },
  watch: {},
  props: {},
  components: {},
  computed: {},
  mounted() {},
  methods: {
    changeSettingName1() {
      //   alert(1)
      //   方式一执行
      this.$store.commit("setting/changeName"); //   模块名/方法名
      //    alert(1.2)
    },
    // 方式二
    // ...mapMutations(["setting/changeName"]),

    // changeSettingName2() {
    //   //   方式二执行
    //   this["setting/changeName"](); //正确写法
    // },
    // 方式三 
    ...mapMutations(['changeName']),

      changeSettingName3() {
      //   方式二执行
      this.changeName(); //正确写法
    },


     



  },
  filters: {}
};
</script>

<style scoped lang="css"></style>
